<template>
  <div>
    <el-input v-model="showValue" :disabled="disabled" class="select-user-input" readonly @click.native="handleShow"/>
    <el-dialog
      :visible.sync="dialogVisible"
      title="人员选择"
      width="30%"
      append-to-body
    >
      <el-tree ref="empTree" :data="data" :props="defaultProps" default-expand-all
               show-checkbox
      >
       <span class="custom-tree-node" slot-scope="{ node, data }">
         <span v-if="data.weight===5">{{ node.label }}</span>
         <span v-if="data.weight===6">{{data.nickName}}({{ node.label }})</span>
      </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {getEmpTreeRequest} from "../../../api"
import _ from 'lodash'
import mixin from "../mixin"

export default {
  name: "TUserSelect",
  mixins: [mixin],
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data: [],
      showValue: '',
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name',
        disabled: this.isDisabled
      }
    }
  },
  created() {
    getEmpTreeRequest().then(res => {
      this.data = res.data
    })
    this.showValue = this.value.map(item => item.nickName).join(",")
  },
  methods: {
    isDisabled(data, node) {
      if (_.startsWith(data.id, "dept")) {
        return true
      }
      return false
    },
    handleShow() {
      if (this.disabled) return
      this.dialogVisible = true
    },
    handleSubmit() {
      console.log(this.$refs.empTree.getCheckedNodes(true))
      this.changeValue = this.$refs.empTree.getCheckedNodes(true).map(item => {
        return {name: item.name, nickName: item.nickName, id: item.id}
      })
      this.dialogVisible = false
      if (this.changeValue) {
        this.showValue = this.changeValue.map(item => item.nickName).join(",")
      }
    }
  }
}
</script>

<style >
.select-user-input{
  cursor: pointer;
}
</style>
